<template>
  <view class="container">
    <u-navbar
      title="预约详情"
      :is-back="true"
    ></u-navbar>
    
    <view class="status-card">
      <view class="status-icon">
        <u-icon 
          :name="getStatusIcon(reservation.status)" 
          :color="getStatusColor(reservation.status)" 
          size="60"
        ></u-icon>
      </view>
      <view class="status-text">{{ getStatusText(reservation.status) }}</view>
      <view class="status-desc">{{ getStatusDesc(reservation.status) }}</view>
    </view>
    
    <view class="info-card">
      <view class="card-title">预约信息</view>
      <view class="info-item">
        <text class="label">预约号</text>
        <text class="value">{{ reservation.reservation_no }}</text>
      </view>
      <view class="info-item">
        <text class="label">图书馆</text>
        <text class="value">{{ reservation.library_name }}</text>
      </view>
      <view class="info-item">
        <text class="label">楼层</text>
        <text class="value">{{ reservation.floor_name }}</text>
      </view>
      <view class="info-item">
        <text class="label">区域</text>
        <text class="value">{{ reservation.area_name }}</text>
      </view>
      <view class="info-item">
        <text class="label">座位号</text>
        <text class="value">{{ reservation.seat_name }}</text>
      </view>
      <view class="info-item">
        <text class="label">预约日期</text>
        <text class="value">{{ reservation.reserve_date }}</text>
      </view>
      <view class="info-item">
        <text class="label">预约时段</text>
        <text class="value">{{ getTimeSlotText(reservation.time_slot) }}</text>
      </view>
      <view class="info-item">
        <text class="label">预约时间</text>
        <text class="value">{{ reservation.create_time }}</text>
      </view>
    </view>
    
    <view class="time-card" v-if="reservation.status !== 'cancelled'">
      <view class="card-title">使用时间</view>
      <view class="time-line">
        <view class="time-item" :class="{'active': reservation.status !== 'waiting'}">
          <view class="time-dot"></view>
          <view class="time-content">
            <view class="time-label">签到时间</view>
            <view class="time-value">{{ reservation.check_in_time || '未签到' }}</view>
          </view>
        </view>
        <view class="time-item" :class="{'active': reservation.status === 'completed'}">
          <view class="time-dot"></view>
          <view class="time-content">
            <view class="time-label">签退时间</view>
            <view class="time-value">{{ reservation.check_out_time || '未签退' }}</view>
          </view>
        </view>
      </view>
    </view>
    
    <view class="action-buttons" v-if="reservation.status === 'waiting' || reservation.status === 'using'">
      <u-button 
        v-if="reservation.status === 'waiting'" 
        type="error" 
        @click="cancelReservation"
      >取消预约</u-button>
      <u-button 
        type="primary" 
        @click="showQrCode"
      >{{ reservation.status === 'waiting' ? '签到' : '签退' }}</u-button>
    </view>
    
    <!-- 签到/签退二维码弹窗 -->
    <u-popup
      v-model="showQrCodePopup"
      mode="center"
      border-radius="10"
      width="80%"
      height="auto"
    >
      <view class="qrcode-popup">
        <view class="popup-title">{{ currentAction === 'checkIn' ? '签到' : '签退' }}二维码</view>
        <view class="qrcode-wrapper">
          <image class="qrcode" :src="qrCodeUrl" mode="aspectFit"></image>
        </view>
        <view class="popup-info">
          <view class="info-item">
            <text class="label">预约号:</text>
            <text class="value">{{ reservation.reservation_no }}</text>
          </view>
          <view class="info-item">
            <text class="label">座位:</text>
            <text class="value">{{ reservation.seat_name }}</text>
          </view>
          <view class="info-item">
            <text class="label">时间:</text>
            <text class="value">{{ reservation.reserve_date }} {{ getTimeSlotText(reservation.time_slot) }}</text>
          </view>
        </view>
        <view class="popup-tip">请在图书馆扫码{{ currentAction === 'checkIn' ? '签到' : '签退' }}</view>
        <view class="popup-buttons">
          <u-button @click="showQrCodePopup = false">关闭</u-button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      id: '',
      reservation: {
        id: '',
        reservation_no: '',
        library_name: '',
        floor_name: '',
        area_name: '',
        seat_name: '',
        reserve_date: '',
        time_slot: '',
        status: '',
        create_time: '',
        check_in_time: '',
        check_out_time: ''
      },
      showQrCodePopup: false,
      currentAction: 'checkIn',
      qrCodeUrl: ''
    }
  },
  onLoad(options) {
    this.id = options.id || ''
    
    if (this.id) {
      this.getReservationDetail()
    } else {
      uni.showToast({
        title: '参数错误',
        icon: 'none'
      })
      setTimeout(() => {
        uni.navigateBack()
      }, 1500)
    }
  },
  methods: {
    // 获取预约详情
    async getReservationDetail() {
      try {
        uni.showLoading({
          title: '加载中'
        })
        
        // 这里假设API接口是通过预约记录列表接口获取详情
        const res = await this.$api.getReservations({
          id: this.id
        })
        
        uni.hideLoading()
        
        if (res.data && res.data.code === 200 && res.data.data.rows.length > 0) {
          this.reservation = res.data.data.rows[0]
        } else {
          uni.showToast({
            title: res.data.message || '获取预约详情失败',
            icon: 'none'
          })
        }
      } catch (error) {
        uni.hideLoading()
        console.error('获取预约详情失败', error)
        uni.showToast({
          title: '获取预约详情失败',
          icon: 'none'
        })
      }
    },
    
    // 获取状态图标
    getStatusIcon(status) {
      const statusIconMap = {
        'waiting': 'clock',
        'using': 'bookmark',
        'completed': 'checkmark-circle',
        'cancelled': 'close-circle',
        'expired': 'error-circle'
      }
      return statusIconMap[status] || 'info-circle'
    },
    
    // 获取状态颜色
    getStatusColor(status) {
      const statusColorMap = {
        'waiting': '#1890ff',
        'using': '#52c41a',
        'completed': '#52c41a',
        'cancelled': '#ff4d4f',
        'expired': '#fa8c16'
      }
      return statusColorMap[status] || '#999999'
    },
    
    // 获取状态文本
    getStatusText(status) {
      const statusTextMap = {
        'waiting': '待使用',
        'using': '使用中',
        'completed': '已完成',
        'cancelled': '已取消',
        'expired': '已过期'
      }
      return statusTextMap[status] || '未知状态'
    },
    
    // 获取状态描述
    getStatusDesc(status) {
      const statusDescMap = {
        'waiting': '请在预约时间内到图书馆签到使用',
        'using': '您已签到，正在使用座位',
        'completed': '预约已完成，感谢您的使用',
        'cancelled': '预约已取消',
        'expired': '预约已过期，未按时签到'
      }
      return statusDescMap[status] || ''
    },
    
    // 获取时段文本
    getTimeSlotText(timeSlot) {
      const timeSlotTextMap = {
        'morning': '上午 (8:00-12:00)',
        'afternoon': '下午 (13:00-17:00)',
        'evening': '晚上 (18:00-22:00)',
        'allday': '全天 (8:00-22:00)'
      }
      return timeSlotTextMap[timeSlot] || '未知时段'
    },
    
    // 取消预约
    cancelReservation() {
      uni.showModal({
        title: '提示',
        content: '确定要取消该预约吗？',
        success: async (res) => {
          if (res.confirm) {
            try {
              uni.showLoading({
                title: '取消中'
              })
              
              const res = await this.$api.cancelReservation({
                id: this.id
              })
              
              uni.hideLoading()
              
              if (res.data && res.data.code === 200) {
                uni.showToast({
                  title: '取消成功',
                  icon: 'success'
                })
                
                // 刷新详情
                this.getReservationDetail()
              } else {
                uni.showToast({
                  title: res.data.message || '取消失败',
                  icon: 'none'
                })
              }
            } catch (error) {
              uni.hideLoading()
              console.error('取消预约失败', error)
              uni.showToast({
                title: '取消失败，请稍后重试',
                icon: 'none'
              })
            }
          }
        }
      })
    },
    
    // 显示二维码
    showQrCode() {
      this.currentAction = this.reservation.status === 'waiting' ? 'checkIn' : 'checkOut'
      
      // 生成二维码
      this.qrCodeUrl = `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${this.currentAction}_${this.id}`
      
      this.showQrCodePopup = true
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 30rpx;
}

.status-card {
  background-color: #ffffff;
  margin: 20rpx;
  border-radius: 10rpx;
  padding: 40rpx 20rpx;
  text-align: center;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.status-text {
  font-size: 36rpx;
  font-weight: bold;
  margin: 20rpx 0;
}

.status-desc {
  font-size: 26rpx;
  color: #666;
}

.info-card, .time-card {
  background-color: #ffffff;
  margin: 20rpx;
  border-radius: 10rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.card-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  position: relative;
  padding-left: 20rpx;
  
  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6rpx;
    height: 30rpx;
    background-color: #1A8DFF;
    border-radius: 3rpx;
  }
}

.info-item {
  display: flex;
  justify-content: space-between;
  padding: 16rpx 0;
  border-bottom: 1rpx solid #f8f8f8;
  
  &:last-child {
    border-bottom: none;
  }
  
  .label {
    font-size: 28rpx;
    color: #666;
  }
  
  .value {
    font-size: 28rpx;
    color: #333;
    font-weight: 500;
  }
}

.time-line {
  padding: 20rpx 0;
}

.time-item {
  display: flex;
  position: relative;
  padding-bottom: 40rpx;
  
  &:last-child {
    padding-bottom: 0;
  }
  
  &::before {
    content: '';
    position: absolute;
    left: 10rpx;
    top: 20rpx;
    bottom: 0;
    width: 2rpx;
    background-color: #e8e8e8;
  }
  
  &:last-child::before {
    display: none;
  }
  
  &.active {
    .time-dot {
      background-color: #1A8DFF;
    }
    
    .time-value {
      color: #1A8DFF;
    }
  }
}

.time-dot {
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
  background-color: #e8e8e8;
  margin-right: 20rpx;
  z-index: 1;
}

.time-content {
  flex: 1;
}

.time-label {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 6rpx;
}

.time-value {
  font-size: 26rpx;
  color: #999;
}

.action-buttons {
  display: flex;
  justify-content: space-between;
  padding: 20rpx;
  gap: 20rpx;
}

.qrcode-popup {
  padding: 30rpx;
  
  .popup-title {
    font-size: 36rpx;
    font-weight: bold;
    text-align: center;
    margin-bottom: 30rpx;
  }
  
  .qrcode-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 30rpx;
    
    .qrcode {
      width: 300rpx;
      height: 300rpx;
    }
  }
  
  .popup-info {
    margin-bottom: 30rpx;
  }
  
  .info-item {
    display: flex;
    margin-bottom: 10rpx;
    
    .label {
      width: 120rpx;
      font-size: 28rpx;
      color: #666;
    }
    
    .value {
      flex: 1;
      font-size: 28rpx;
      color: #333;
    }
  }
  
  .popup-tip {
    font-size: 28rpx;
    color: #ff4d4f;
    text-align: center;
    margin-bottom: 30rpx;
  }
  
  .popup-buttons {
    display: flex;
    justify-content: center;
  }
}
</style>
